<template>
  <div class="app-container">

    <header>
      <el-row>
        <el-col :span="12">
          <h3>jsmerge——javascript源码合并工具 powered by <a href="https://gitee.com/uctoo/uctoo/blob/master/extend/uctoo/library/JsParser.php" style="text-decoration:underline;" target="_blank">JsParser</a></h3>
        </el-col>
      </el-row>
    </header>
    <el-divider></el-divider>
    <el-alert
            title="目前仅对示例代码结构的JavaScript代码段有效，欢迎算法大神完善成通用js_merge函数。"
            type="error">
    </el-alert>
    <el-row>
      <el-col :span="8">
        <div class="grid-content">
          <el-card shadow="never">
            <div slot="header">
              <span>javascript code 1</span>

              <el-dropdown @command="handleCardCommand" style="float: right; padding: 3px 0">
            <span class="el-dropdown-link">
               <i class="el-icon-more el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="d" >配置卡片</el-dropdown-item>
                  <el-dropdown-item command="e" divided>移除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <i class="el-icon-refresh" style="float: right; padding: 3px 0"></i>
            </div>
            <el-form ref="javascript_code1_form">

              <el-form-item label="">
                <el-input type="textarea" v-model="jscode1" :autosize="{ minRows: 20, maxRows: 100}"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleDemo">示例代码</el-button>
                <el-button type="primary" @click="handleParser">提交</el-button>
              </el-form-item>
            </el-form>

          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <el-card shadow="never">
            <div slot="header">
              <span>javascript code 2</span>

              <el-dropdown @command="handleCardCommand" style="float: right; padding: 3px 0">
            <span class="el-dropdown-link">
               <i class="el-icon-more el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="d" >配置卡片</el-dropdown-item>
                  <el-dropdown-item command="e" divided>移除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

              <i class="el-icon-refresh" style="float: right; padding: 3px 0"></i>
            </div>
            <el-form ref="javascript_code2_form">

              <el-form-item label="">
                <el-input type="textarea" v-model="jscode2" :autosize="{ minRows: 20, maxRows: 100}"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <el-card shadow="never">
            <div slot="header">
              <span>result</span>

              <el-dropdown @command="handleCardCommand" style="float: right; padding: 3px 0">
            <span class="el-dropdown-link">
               <i class="el-icon-more el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="d" >配置卡片</el-dropdown-item>
                  <el-dropdown-item command="e" divided>移除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

              <i class="el-icon-refresh" style="float: right; padding: 3px 0"></i>
            </div>
            <el-form ref="javascript_code3_form">
              <el-form-item label="">
                <el-input type="textarea" v-model="result" :autosize="{ minRows: 20, maxRows: 100}"></el-input>
              </el-form-item>
            </el-form>

          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import jsonView from "vue-json-views";
export default {
  name: 'develop_jsmerge',
  components: {
    jsonView
  },
  data() {
    return {
      title: 'jsmerge',
      result: '',
      jscode1:'',
      jscode2:'',
      rules: {
      },
    }
  },
  methods: {
    handleCardCommand(command) {
      this.$message('click on item ' + command);
    },
    handleParser() {
          var submitData = {string1:this.jscode1,string2:this.jscode2}
          this.$http.post('develop/jsparser/jsmerge', submitData).then(response => {
            this.result = response.data
            if (response.code === 10000) {
              this.$message.success(response.message)
            } else {
              this.$message.error(response.message)
            }
          })
    },
    handleDemo() {
    this.jscode1 = 'import formOperate from \'@/layout/mixin/formOperate\';\n' +
            '\n' +
            '  export default {\n' +
            '    name:\'el-js-replace-module_el-js-replace-url\',\n' +
            '    mixins: [formOperate],\n' +
            '    data() {\n' +
            '      return {\n' +
            '        url: \'el-js-replace-url\',\n' +
            '        formName: \'el-js-replace-formName\',\n' +
            '        formLabelWidth: \'120px\',\n' +
            '        queryParam: {\n' +
            'el_js_replace_fields:\'\'\n' +
            '        },\n' +
            '        formVisible: false,\n' +
            '        formFieldsData: {\n' +
            'el_js_replace_fields:\'\'\n' +
            '        },\n' +
            '        loading: false,\n' +
            '        checkList: [],\n' +
            '        search: \'\',\n' +
            '\tdrawerTitle: \'el-js-replace-formName\',\n' +
            '        form: { el_js_replace_fields:\'\' },\n' +
            '        timer: null,\n' +
            '        rules: {\n' +
            '        },\n' +
            '      }\n' +
            '    },\n' +
            '    computed: {},\n' +
            '    watch: {},\n' +
            '      mounted() {\n' +
            '          this.init();\n' +
            '      },\n' +
            '      methods: {\n' +
            '         init() {\n' +
            '         }\n' +
            '      },\n' +
            '  }';

    this.jscode2 = ' export default {\n' +
            '    data() {\n' +
            '      return {\n' +
            '        routeOptionList:[],\n' +
            '      }\n' +
            '    },\n' +
            '    mounted() {\n' +
            '    },\n' +
            '      computed: {},\n' +
            '      watch: {},\n' +
            '    methods: {\n' +
            '      init() {\n' +
            '        this.$http.get("tables").then(response => {\n' +
            '          this.routeOptionList = response.data;\n' +
            '        });\n' +
            '      },\n' +
            '      queryrouteOptionList(query) {\n' +
            '        if (query !== \'\') {\n' +
            '          this.loading = true;\n' +
            '          this.$http.get("tables"+"?tablename="+query).then(response => {\n' +
            '            this.loading = false;\n' +
            '            this.routeOptionList = response.data;\n' +
            '          });\n' +
            '        } else {\n' +
            '          this.options = [];\n' +
            '        }\n' +
            '      },\n' +
            '    },\n' +
            '  }';
    }
  }
}

</script>
